<template>
  <v-container>
    <v-data-iterator
      :items="items"
      :items-per-page.sync="itemsPerPage"
    >
      <template v-slot:default="props">
        <v-row>
          <v-col
            cols="6"
            lg="4"
            v-for="item in props.items"
            :key="item.index"
          >
            <v-card
              color="blue"
              class="white lighten-5 pa-0"
            >
              <v-card-title ><v-row><v-col>{{item.abbrName}}</v-col></v-row>
                <v-row>
                  <v-col>
                  <v-btn type="neutral" round size="lg"
                         v-if="item.statusMessage === 'Already Approved' && item.identity === 'Chair'"
                         @click="allowContribute(item)">Allow Contribute</v-btn>

                    <v-card v-model="dialog"
                            v-if="title==='NewInvitations'"
                    >
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-chip-group v-model="chosenTopics"
                                      :items="item.topics"
                                      multiple
                        >
                        <v-chip color="blue darken-1" text v-for="(topic,index) in item.topics"
                                    :key="index"
                                    :label="topic"
                        >{{topic}}</v-chip>
                        </v-chip-group>
                      </v-card-actions>
                    </v-card>
                    <v-btn v-if="item.statusMessage === 'Reviewing' && item.identity === 'Chair'" type="neutral" round size="lg" @click="showReviewStatus(item)">查看评审状态</v-btn>

                    <v-btn v-if="title==='NewInvitations'" type="neutral" round size="lg" @click="agree(item,item.index,chosenTopics)"
                           :disabled="chosenTopics===''"
                    >Agree</v-btn>
                  <v-btn v-if="title==='NewInvitations'" type="neutral" round size="lg" @click="reject(item,item.index)">Reject</v-btn>
                  <v-btn @click="invitebutton(item)"
                         v-if="item.identity === 'Chair' && (item.statusMessage === 'Already Approved' || item.statusMessage === 'Allow Contribution')"
                  > Invite
                  </v-btn>
                    <v-card v-model="dialog"
                            v-if="item.identity === 'Chair' && item.statusMessage === 'Allow Contribution'"
                    >
                      <v-card-title class="headline">Choose a strategy:</v-card-title>
                      <v-card-text>Relevance基于topic相关度，Amount基于稿件数量平均分配。</v-card-text>
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" text @click="relevance(item)">Relevance</v-btn>
                        <v-btn color="blue darken-1" text @click="amount(item)">Amount</v-btn>
                      </v-card-actions>
                    </v-card>
                  <v-btn @click="contributebutton(item)"
                         v-if="item.identity !== 'Chair' && (item.statusMessage === 'Allow Contribution')"
                  > Contribute
                  </v-btn>
                    <v-btn @click="review(item)"
                         v-if="(title === 'My Review') || (title === 'My Review' && item.statusMessage === 'Second Discussion')"
                    > Review</v-btn>
                    <v-btn @click="confirm(item)"
                           v-if="(title === 'My Review' && item.statusMessage === 'Second Discussion')"
                    > Confirm(do not change)</v-btn>
                    <v-btn @click="publish(item)"
                           v-if="item.statusMessage === 'Reviewing' && item.identity === 'Chair'"
                    > Publish Results
                    </v-btn>
                    <v-btn @click="publishSecond(item)"
                           v-if="item.statusMessage === 'Open for Rebuttal' && item.identity === 'Chair'"
                    > Publish Results
                    </v-btn>

                    <v-btn v-if="title==='Contribution' && item.meetingStatus === 2" type="neutral" round size="lg" @click="update(item)">Update</v-btn>
                    <v-btn v-if="title==='Contribution' && item.contributionStatus === -1 && item.meetingStatus ===4" type="neutral" round size="lg" @click="rebuttal(item)">Rebuttal</v-btn>
                    <v-btn v-if="title==='Contribution' && item.contributionStatus === -1 && item.meetingStatus ===4" type="neutral" round size="lg" @click="notRebuttal(item)">Do Not Rebuttal</v-btn>

                  </v-col>
<!--                 item.contributionStatus === ？表示没有rebuttal过，才显示rebuttal按钮 -->
                </v-row>
              </v-card-title>
              <v-divider class="my-4 py-0"></v-divider>
              <v-list
                color="blue"
                dense
                class="white lighten-5 px-0 py-0"
                v-for="(value,name) in item"
                :key="item.index"
              >
                <v-list-item>
                  <v-list-item-content>{{name}} :</v-list-item-content>
                  <v-list-item-content>{{value}}</v-list-item-content>
                </v-list-item>
                </v-list>

              <v-list
                dense
                class="white lighten-5 px-0 py-0"
                v-for="func in item.functions"
                :key="func"
              >
                <v-list-item>
                  <v-list-item-content>
                    <v-btn
                      small
                      :class="func.displayColor"
                      @click="callFunction(func.functionName,item)"
                    >{{func.componentName}}
                    </v-btn>
                  </v-list-item-content>
                </v-list-item>
                 </v-list>
            </v-card>
          </v-col>
        </v-row>
      </template>
    </v-data-iterator>
  </v-container>
</template>

<script>
import MaterialCard from './MaterialCard'
export default {
  name: 'displayList',
  props: [
    '_list',
    '_itemsPerPage',
    '_title',
    '_displaySet',
    '_items',
    '_functions',
    '_itemPerPage',
    '_topics'
  ],
  components: {
    MaterialCard
  },
  data () {
    return {
      dialog: false,
      list: this._list,
      itemsPerPage: this._itemsPerPage,
      title: this._title,
      displaySet: this._displaySet,
      items: this._items,
      functions: this._functions,
      topics: this._topics,
      chosenTopics: []
    }
  },
  methods: {
    update (item) {
      this.$emit('wantToEdit', item)
    },
    rebuttal (item) {
      this.$emit('wantToRebuttal', item)
    },
    notRebuttal(item) {
      this.$emit('wantToNotRebuttal', item)
    },
    showReviewStatus (item) {
      console.log(item.fullName)
      this.$router.replace('/reviewStatus/' + item.fullName)
    },
    openReview (item) {
      this.dialog = true
      console.log('openreview:' + item.fullName)
      // this.$emit('wantToOpenReview', item)
    },
    strategy (item, method) {
      console.log(item.fullName)
      this.$emit('wantToDistribute', method)
    },
    relevance (item) {
      console.log('item.fullName:' + item.fullName)
      this.$emit('wantToRelevance', item)
    },
    amount (item) {
      console.log('item.fullName:' + item.fullName)
      this.$emit('wantToAmount', item)
    },
    review (item) {
      this.$emit('wantToReview', item)
    },
    confirm (item) {
      this.$emit('wantToConfirm', item)
    },
    publish (item) {
      this.$emit('wantToPublish', item)
    },
    publishSecond (item) {
      this.$emit('wantToPublishSecond', item)
    },
    invitebutton (item) {
      console.log(item.router)
      this.$emit('wantToEatApple', item)
    },
    contributebutton (item) {
      console.log(item.router)
      this.$emit('wantToContribute', item)
    },
    agree (item, itemIndex, chosenTopics) {
      console.log('child' + chosenTopics)
      const topicNames = []
      for (var i = 0; i < chosenTopics.length; i++) {
        topicNames.push(item.topics[chosenTopics[i]])
      }
      console.log("name:"+topicNames)
      this.$emit('wantToEatBanana', item, itemIndex, topicNames)
    },
    reject (item, itemIndex) {
      this.$emit('wantNotToEatBanana', item, itemIndex)
    },
    allowContribute (item) {
      this.$emit('wantToAllContribute', item)
    },
    callFunction (functionName, item) {
      console.log(this.list)
      console.log(this.functions)
      this.functions[functionName](item)
    }
  }
}
</script>
